<template>
  <div class="stepper-input" @click.stop>
    <button
      @click="$emit('change',num-1)"
      :disabled="num <= min"
    >-</button>
    <input :value="num" />
    <button
      @click="$emit('change',num+1)"
      :disabled="num >= max"
    >+</button>
  </div>
</template>

<script>
  export default {
    //传入的props是不允许修改的
    props:{
      num:{
        type:Number,
        required:true
      },
      max:{
        type:Number,
        default:Infinity
      },
      min:{
        type:Number,
        default:0
      }
    }
  }
</script>

<style lang="sass" scoped>
.stepper-input
  // inline-block
  display: inline-flex
  width: 120px
  height: 40px
  button,input
    width: 40px
    flex: 0 0 40px
    text-align: center
</style>
